<ion-header>
  <employee-header [showCate]="false"></employee-header>
  <ion-toolbar no-padding color="jjna-green">
    <ion-grid no-padding>
      <ion-row>
        <ion-col col-4 *ngFor="let c of categories" text-center text-uppercase
                 (click)="getDishesbyCategory(c.Category_ID)">
          {{c.Category_Name}}
        </ion-col>


        <ion-col col-4></ion-col>
        <ion-col col-4 text-center text-uppercase (click)="showAll()">
          All
        </ion-col>

      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list color="grid" no-padding padding-top *ngIf="total; else noDish">
    <ion-item *ngFor="let d of dishes" no-lines margin-bottom>
      <ion-thumbnail item-left>
        <img src="{{d.Dish_Picture}}">
      </ion-thumbnail>
      <h2>{{d.Dish_Name}}
       </h2>
      <p>Ingr:<span color="primary">{{d.Ingredients}}</span></p>
      <spinner-total [max]="d.Number_Available"  [price]="d.Price" [num]="numberOfCarts(d.Dish_ID)"
                     (onNumChanged)="onNumChanged($event,d)"
                     [total]="d.Price * numberOfCarts(d.Dish_ID)"></spinner-total>
    </ion-item>
  </ion-list>

  <ng-template #noDish class="no-dish">No Dish!</ng-template>
  <ion-infinite-scroll (ionInfinite)="getMore($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles"
                                 loadingText="Loading more dishes..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
